<script setup>
import {updateColor} from "@/apis/zyj/color.js";
import {ElMessage} from "element-plus";
import {nextTick, ref} from "vue";

const props = defineProps(['updateDialog', 'form'])
const ruleFormRef = ref();

const confirmButton = (value) => {
  value.validate(valid => {
    if (valid) {
      console.log(props.form)
      updateColor(props.form).then(req => {
        console.log(req)
        if (req === '成功') {
          ElMessage.success('修改成功')
        } else {
          ElMessage.error('修改失败')
        }
        handleClose()
      })
    } else ElMessage.error('请填写完整信息');
  });
}

// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}

const rules = {
  colorCode: [
    {required: true, message: "请输入颜色代码", trigger: "blur"},
  ],
  color: [
    {required: true, message: "请输入颜色", trigger: "blur"},
  ],
};

const emit = defineEmits(['close-dialog'])
const handleClose = () => {
  emit('close-dialog')
}

</script>

<template>
  <el-dialog title="修改颜色" v-model="props.updateDialog" @open="handleOpenCardDialog" @close="handleClose"
             width="30%">
    <el-form :model="props.form" label-width="80px" :rules="rules" ref="ruleFormRef">
      <el-form-item label="色号" prop="colorCode">
        <el-input v-model="form.colorCode" placeholder="请输入颜色代码"/>
      </el-form-item>
      <el-form-item label="颜色" prop="color">
        <el-input v-model="form.color" placeholder="请输入颜色"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio label="1" value="正常">启用</el-radio>
          <el-radio label="0" value="禁用">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmButton(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>